<style>
    @import url('/static/css/UserProfile.css');
    #avatar{
        display: none;
    }
    .avatar{
        display: block;
        width: 50%;
        overflow: hidden;
    }
    
</style>
<!-- 头部 -->
<header>
    <div class="left">
        <a href="javascript:history.back(-1)">
            <span class="glyphicon glyphicon-menu-left back" aria-hidden="true"></span>
            <span>返回</span>
        </a>
    </div>
    <div class="center">
        信息录入
    </div>
    <div class="right"></div>
</header>
<!-- 用户信息 -->
<div class="user">
    <div class="avatar wow fadeInUp">
        <img src="{$LoginUser.avatar ? '/'.$LoginUser.avatar : '/static/images/avatar.png'}" />
    </div>
</div>

<form class="profile wow fadeInUp" data-wow-delay="200ms" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" class="form-control" id="email" name="email" value="{$LoginUser.email}" disabled placeholder="请输入邮箱" />
    </div>

    <div class="form-group">
        <label for="nickname">昵称</label>
        <input type="text" class="form-control" id="nickname" name="nickname" value="{$LoginUser.nickname}" placeholder="请输入昵称" />
    </div>

    <div class="form-group">
        <label for="phone">手机号</label>
        <input type="text" class="form-control" id="phone" name="phone" value="{$LoginUser.phone}" placeholder="请输入手机号" />
    </div>

    <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码" />
    </div>

    <div class="form-group">
        <label for="gender">性别</label>
        <select class="form-control" name="sex">
            <option value="0" {$LoginUser.sex == 0 ? 'selected' : ''}>保密</option>
            <option value="1" {$LoginUser.sex == 1 ? 'selected' : ''}>男</option>
            <option value="3" {$LoginUser.sex == 2 ? 'selected' : ''}>女</option>
        </select>
    </div>

    <div class="form-group">
        <label for="province">省份</label>
        <select class="form-control" id="province" name="province">
            <option>请选择</option>
            {foreach $provinces as $item}
                <option value="{$item.code}" {$item.code == $User.province ? 'selected':''}>{$item.name}</option>
            {/foreach}
        </select>
    </div>

    <div class="form-group">
        <label for="city">市</label>
        <select class="form-control" id="city" name="city">
            <option>请选择</option>
            {foreach $citys as $item}
                <option value="{$item.code}" {$item.code == $User.city ? 'selected':''}>{$item.name}</option>
            {/foreach}
        </select>
    </div>

    <div class="form-group">
        <label for="district">区</label>
        <select class="form-control" id="district" name="district">
            <option>请选择</option>
            {foreach $districts as $item}
                <option value="{$item.code}" {$item.code == $User.district ? 'selected':''}>{$item.name}</option>
            {/foreach}
        </select>
    </div>

    <div class="form-group">
        <label>头像</label>
        <input type="file" name="avatar" id="avatar">
        <label for="avatar" class="avatar">
            <img src="{$LoginUser.avatar ? '/'.$LoginUser.avatar : '/static/images/avatar.png'}" alt="" id="upload">
        </label>
    </div>
    
    <div class="action">
        <button class="btn">提交</button>
    </div>
</form>


<script>
    function getObjectURL(file) {
        var url = null ; 
        if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }

    $('#avatar').change(function(){
        var url=getObjectURL(this.files[0]);
        if(url){
        $('#upload').attr('src',url);
        }
    });

    // 选择省份
    $('#province').change(function(){
        var code = $(this).val();
        $.ajax({
            url:`{:url('contact/area')}`,
            type:'POST',
            data:{
                code:code,
                action:'province'
            },
            dataType:'json',
            success:function(res)
            {
                if(res.code === 0)
                {
                    layer.msg(res.msg,{icon:5});
                    return false;
                }

                // 定义空的字符串
                var CityOption = '';
                var DistrictOption = '';

                for(let item of res.data.CityList)
                {
                    CityOption += `<option value="${item.code}">${item.name}</option>`
                }

                for(let item of res.data.DistrictList)
                {
                    DistrictOption += `<option value="${item.code}">${item.name}</option>`
                }

                // 清空原来的数据
                $('#city').html('');
                $('#district').html('');

                // 重新赋值
                $('#city').html(CityOption);
                $('#district').html(DistrictOption);

            }
        })
    })

    // 选择市
    $('#city').change(function()
    {
        var code = $(this).val();
        $.ajax({
            url:`{:url('contact/area')}`,
            type:'POST',
            data:{
                code:code,
            },
            dataType:'json',
            success:function(res)
            {
                if(res.code === 0)
                {
                    layer.msg(res.msg,{icon:5});
                    return false;
                }

                // 定义一个空的字符串
                var option = '';

                for(let item of res.data)
                {
                    option += `<option value="${item.code}">${item.name}</option>`
                }

                // 清空原来的数据
                $('#district').html('');

                // 重新赋值
                $('#district').html(option);
            }
        })
    })

</script>